<template>
	<view class="bg_login">
		<image class="bg_img" src="/static/images/home/register.png"></image>
		<view class="login_box">
			<view class="form_box">
				<text class="txt1">手机号<text></text></text>
				<view class="pwd-view">
					<input type="text" placeholder-class="account-txt" v-model="params.mobileNo" class="uni-input" placeholder="请填写手机号" />
				</view>
			</view>
			<view class="form_box">
				<view class="yzm_box">
					<text class="txt1">验证码<text></text></text>
					<input type="number" placeholder-class="account-txt" v-model="params.smsCode" class="uni-input input_yzm" placeholder="验证码" />
					<view @click="getCode" :class="{disabled: disabled}" class="register_yzms">
							{{countdown}} <text v-if="timestatus">秒重获</text>
					</view>
				</view>
			</view>
			<view class="form_box">
				<text class="txt1">新密码<text></text></text>
				<!-- #ifndef MP-ALIPAY -->
				<view class="pwd-view">
					<input v-if="showPassword" type="text" placeholder-class="account-txt" v-model="params.password" placeholder="请设置新的密码" />
					<input v-if="!showPassword" type="password" placeholder-class="account-txt" v-model="params.password" placeholder="请设置新的密码" />
				    <image @click="showPass" :src="showPassword ? '/static/images/home/eye_icon.png' : '/static/images/home/eye-open.png'" class="eye_size"></image>
				</view>
				<!-- #endif -->
				<!-- #ifdef MP-ALIPAY -->
				<view class="pwd-view">
					<input v-if="showPassword" type="text" placeholder-class="account-txt" v-model="params.password" placeholder="请设置新的密码" />
					<input v-if="!showPassword" password placeholder-class="account-txt" v-model="params.password" placeholder="请设置新的密码" />
				    <image @click="showPass" :src="showPassword ? '/static/images/home/eye_icon.png' : '/static/images/home/eye-open.png'" class="eye_size"></image>
				</view>
				<!-- #endif -->
			</view>
			<view class="form_box">
				<text class="txt1">确认密码<text></text></text>
				<!-- #ifndef MP-ALIPAY -->
				<view class="pwd-view">
					<input v-if="showPassword1" type="text" placeholder-class="account-txt" v-model="params.rePass" placeholder="请确认您的密码" />
					<input v-if="!showPassword1" type="password" placeholder-class="account-txt" v-model="params.rePass" placeholder="请确认您的密码" />
				    <image @click="showPass1" :src="showPassword1 ? '/static/images/home/eye_icon.png' : '/static/images/home/eye-open.png'" class="eye_size"></image>
				</view>
				<!-- #endif -->
				<!-- #ifdef MP-ALIPAY -->
				<view class="pwd-view">
					<input v-if="showPassword1" type="text" placeholder-class="account-txt" v-model="params.rePass" placeholder="请确认您的密码" />
					<input v-if="!showPassword1" password placeholder-class="account-txt" v-model="params.rePass" placeholder="请确认您的密码" />
				    <image @click="showPass1" :src="showPassword1 ? '/static/images/home/eye_icon.png' : '/static/images/home/eye-open.png'" class="eye_size"></image>
				</view>
				<!-- #endif -->
			</view>
			
			<view class="btn_box">
				<button type="primary" class="btn_pri" style="background-color: #477EDA;" @click="toResite">重置</button>
			</view>
		</view>
		<mcModal :isShow="showMcModal" :content="content" :title="title" @cancel='bb()' :inp="false" @ok='cc()' :okBtn='okBtn'></mcModal>
		<tmcModal :isShow="showMcModal1" :showCancel="false" :content="content1" :title="title1" @cancel="cancel" @ok='queren'></tmcModal>
	</view>
</template>

<script>
	import { sendSmsCode,modifyStudentPwd } from '../../common/api/index.js';
	import {_showLoading, _showToast} from '../../common/js/util.js'
	import mcModal from '../../components/custom-modal/custom-modal.vue'
	import tmcModal from '../../components/custom-modal/mc-modal.vue'
	export default {
		data() {
			return {
				params: {
					mobileNo: '',
					password: '',
					rePass: '',
					smsCode: ''
				},
				numberCode: 60,
				disabled: false,
				countdown:'获取验证码',
				timestatus:false,
				showPassword: false,
				showPassword1: false,
				content: '',
				title: '',
				showMcModal: false,
				content1: '',
				title1: '',
				showMcModal1: false,
				okBtn: ''
			}
		},
		components: {
			mcModal,
			tmcModal
		},
		methods: {
			bb() {
				this.showMcModal = false
			},
			cc() {
				this.showMcModal = false
				uni.navigateTo({
					url: './login'
				})
			},
			cancel() {
				this.showMcModal1 = false
			},
			queren() {
				this.showMcModal1 = false
			},
			showTxt(title, content) {
				this.title1 = title
				this.content1 = content
				this.showMcModal1 = true
			},
			showPass() {
				this.showPassword = !this.showPassword;
			},
			showPass1() {
				this.showPassword1 = !this.showPassword1;
			},
			toResite() {
				if(this.params.mobileNo == '') {
					this.showTxt('温馨提示', '请填写手机号')
				} else if(this.params.smsCode == '') {
					this.showTxt('温馨提示', '请填写手机验证码')
				} else if (this.params.password == '') {
					this.showTxt('温馨提示', '请填写重置密码')
				} else if (this.params.rePass == '') {
					this.showTxt('温馨提示', '请填写确认密码')
				} else if (this.params.password != this.params.rePass) {
					this.showTxt('温馨提示', '两次输入的密码不一致')
				} else {
					_showLoading('重置中,请稍后…')
					modifyStudentPwd({
						mobileNo: this.params.mobileNo,
						smsCode: this.params.smsCode,
						newPwd: this.params.password
					}).then(res => {
						if(res.code == 0) {
							uni.hideLoading()
							this.title = '温馨提示'
							this.content = '您的密码重置成功'
							this.okBtn = '去登陆'
							this.showMcModal = true
						} else {
							uni.hideLoading()
							this.showTxt('温馨提示', res.msg)
						}
					}).catch(err => {
						uni.hideLoading()
						this.showTxt('温馨提示', '系统错误!')
					})
				}
			},
			getCode(){
				var that = this;
				if(that.disabled == true) return
				if(that.params.mobileNo==''){
					_showToast('请输入手机号码')
				} else {
					uni.showLoading();
					that.disabled = true; //禁用点击
					sendSmsCode({
						mobileNo: this.params.mobileNo
					}).then(res => {
						if(res.resultCode == 0) {
							uni.hideLoading()
							_showToast('获取验证码成功')
							that.countdown = 60;
			                that.timestatus = true;
			                that.clear = setInterval(that.countDown,1000);
						} else {
							uni.hideLoading()
							_showToast('获取验证码失败')
							that.disabled = false;
						}
					}).catch(err => {
						this.showTxt('温馨提示', '系统错误!')
						that.disabled = false;
					})
				}
			},
			countDown() {
				var that = this;
				if(!that.countdown){
					that.disabled = false;
		            that.timestatus = false;
		            that.countdown = '获取验证码';
		            clearInterval(that.clear);
				} else {
					--that.countdown;
				}
			},
		}
	}
</script>

<style lang="scss">
	.bg_login {
		width: 100vw;
		/* #ifndef MP-WEIXIN*/
		height: calc(100vh - 50px);
		/* #endif */
		/* #ifdef MP-WEIXIN*/
		height: 100vh;
		/* #endif */
		overflow: hidden;
		position: relative;
		.bg_img {
			width: 100%;
			height: 550rpx;
		}
		.login_box {
			width: 84%;
			position: absolute;
			top: 60rpx;
			left: 8%;
			.form_box {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 30rpx;
				background: #FFFFFF;
				border-radius: 8rpx;
				border: 1px solid #E6E6E6;
				height: 84rpx;
				padding: 0 20rpx;
				.txt1 {
					font-size: 28rpx;
					font-family: "PingFangSC-Medium, PingFang SC";
					font-weight: 500;
					color: #6B707A;
					width: 120rpx;
					border-right: 1px solid #E6E6E6;
					padding-right: 9px;
					text-align: justify;
					height: 40rpx;
				}
				.account-txt {
					font-size: 24rpx;
				}
				.input_yzm {
					flex: 1;
					padding: 10rpx;
				}
				.register_yzms {
					text-align: center;
					font-size: 28rpx;
					font-family: "PingFangSC-Medium, PingFang SC";
					font-weight: 500;
					color: #185AFF;
					&.disabled{
						color: #999;
					}
				}
				.yzm_box {
					width: 100%;
					display: flex;
					flex-direction: row;
					justify-content: center;
					align-items: center;
				}
				.pwd-view {
					width: 73%;
					padding: 10rpx;
					font-size: 24rpx;
				    display: flex;
				    align-items: center;
				    justify-content: space-between;
					.eye_size {
						width: 18px;
						height: 18px;
					}
				}
			}
			.btn_box {
				display: flex;
				justify-content: center;
				align-items: center;
				.btn_pri {
					margin-top: 60rpx;
					height: 80rpx;
					line-height: 80rpx;
					text-align: center;
					width: 90%;
					font-size: 26rpx;
					color: #FFFFFF;
					background: linear-gradient(90deg, #0685FF 0%, #285EFF 100%);
					box-shadow: 0px 8px 16px 0px rgba(36, 98, 255, 0.24);
					border-radius: 8rpx;
				}
			}
		}
	}
	
	.hh_cicle {
		width: 180rpx;
		height: 180rpx;
		border-radius: 50%;
		background-color: rgb(244, 242, 242);
		display: flex;
		justify-content: center;
		align-items: center;
		margin-right: 30rpx;
		position: absolute;
		top: 10%;
		left: 39%;
	}
	.txt1 text {
		display: inline-block;
		width:100%;
		height: 0;
	}
</style>